<template>
  <transition name="alert-animation">
    <div role="alert" class="message-box" v-if="show">
      <p class="lt-message__content">{{msg}}</p>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'msg',
  data() {
    return {
      msg: '',
      show: false,
      duration: 3000
    }
  },
  mounted() {
    document.body.appendChild(this.$el)
    this.close()
  },
  methods: {
    close() {
      setTimeout(() => {
        this.show = false
        this.deleteEle()
      }, this.duration)
    },
    deleteEle() {
      setTimeout(() => {
        this.$el.parentNode.removeChild(this.$el)
      }, 500)
      
    }
  }
};
</script>

<style lang="less">
.message-box {
  position: fixed;
  top: 20px;
  left: 50%;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  border-radius: 24px;
  padding: 8px 32px;
  z-index: 100010;
  .lt-message__content {
    font-size: 13px;
  }
}
.alert-animation-enter,
.alert-animation-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.alert-animation-enter-active,
.alert-animation-leave-active {
  transition: all .3s;
}
</style>
